<template>
    <div id="y-chat-header" v-if="!hiddenHeader">
        <div class="header-bar" :style="headerStyles">
            <div class="header-bar-title">
                <img v-if="bigLogo" :src="bigLogo" alt="" class="mc-img">
                <template v-else>
                    <div class="header-back header-icon left-icon" v-if="showLeft">
                        <div class="icon-img" v-if="logo.LEFT_ICON_TEMPLATE" v-html="logo.LEFT_ICON_TEMPLATE"></div>
                        <a class="icon-img tel-icon"
                           v-else-if="themeColor === 'red'"
                           :href="'tel:' + tel">
                            <img referrerpolicy="no-referrer"
                                 src="http://5g.xahmyy.com/zt/index_jfcz/images/header_tel.png"
                                 alt=""
                                 class="mc-img">
                        </a>
                        <div v-else class="icon-img back-icon" onclick="history.go(-1)">
                            <img referrerpolicy="no-referrer"
                                 src="@/assets/back-icon.png"
                                 alt="" class="mc-img">
                        </div>

                    </div>
                    <div class="header-center" v-if="logo.IMG">
                        <div class="logo-img" :style="logo.IMG_STYLE">
                            <img referrerpolicy="no-referrer" :src="logo.IMG" alt="" class="mcn-img">
                        </div>
                    </div>
                    <div class="header-center" v-else-if="logo.TEXT" v-html="logo.TEXT"></div>
                    <div class="header-center" v-else>
                        <div class="logo-img" :style="logo.IMG_STYLE">
                            <img referrerpolicy="no-referrer" :src="logoImg" alt="" class="mcn-img">
                        </div>
                    </div>
                    <div class="header-tel header-icon right-icon" v-if="showTel">
                        <div class="icon-img" v-if="logo.RIGHT_ICON_TEMPLATE" v-html="logo.RIGHT_ICON_TEMPLATE"></div>
                        <div class="icon-img tel-icon" v-else-if="themeColor === 'red'">
                            <img referrerpolicy="no-referrer"
                                 src="http://5g.xahmyy.com/zt/index_jfcz/images/header_zb.png"
                                 alt="" class="mc-img">
                        </div>
                        <a v-else class="icon-img tel-icon" :href="'tel:' + tel">
                            <img referrerpolicy="no-referrer" src="@/assets/tel.png" alt="" class="mc-img">
                        </a>

                    </div>
                </template>
            </div>
        </div>
        <div class="nav-bar " v-if="!hidden">
            <div class="test-item" :style="{width: `${itemWidth}rem`}" ref="animate">
                <svg t="1552893791945" class="icon" style="" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="2524" xmlns:xlink="http://www.w3.org/1999/xlink"
                     width="250" height="86" viewBox="0 0 250 86">
                    <path d="M0 86 A15 15, 0 0 0 15 71 T15 40 A40 40, 0 0 1 55 0 T195 0 A40 40, 0 0 1 235 40 T235 71 A15 15, 0 0 0 250 86 Z"
                          stroke="none" fill="#fff"></path>
                </svg>
            </div>
            <div class="nav-item"
                 v-for="item in routerList"
                 :key="item.path"
                 :class="$route.name === item.name && 'active'"
                 @click="$router.push(item.path)">
                <p>
                    {{ item.title }}
                </p>
            </div>
        </div>
        <!--<div class="nav-empty"></div>-->
    </div>
</template>

<script>
    import anime from 'animejs';
    import logo  from '@/assets/logo.png';

    export default {
        data() {
            return {
                routerList  : CONFIG.BASE.ROUTER,
                tel         : CONFIG.BASE.TEL,
                showTel     : CONFIG.BASE.SHOW_TEL,
                showLeft    : CONFIG.BASE.SHOW_LEFT,
                hidden      : CONFIG.BASE.HIDDEN_NAVIGATION,
                hiddenHeader: CONFIG.BASE.HIDDEN_HEADER,
                logo        : CONFIG.BASE.HEADER_LOGO,
                bigLogo     : CONFIG.BASE.BIG_LOGO,
                themeColor  : CONFIG.THEME.COLOR,
                firstAnimate: true,
                logoImg     : logo,
            }
        },
        computed: {
            itemWidth() {
                return 10 / (this.routerList.length || 0);
            },
            headerStyles() {
                let result = {};

                if (this.logo.BACKGROUND_IMAGE) {
                    result[ 'backgroundImage' ] = `url(${ this.logo.BACKGROUND_IMAGE })`
                }

                return result
            }
        },
        methods : {
            findRouteIndex(name) {
                return this.routerList.findIndex(e => e.name === name);
            },
            getBasisValue(name) {
                return {
                    index  : this.findRouteIndex(name),
                    val    : this.itemWidth,
                    animate: this.$refs.animate,
                }
            },
            navigationAnimate(name) {
                let { index, val, animate } = this.getBasisValue(name);

                anime({
                    targets   : animate,
                    translateX: val * index + 'rem',
                    duration  : 400,
                    easing    : 'easeInOutQuart'
                })
            },
            firstNavigation(name) {
                let { index, val, animate } = this.getBasisValue(name);

                this.firstAnimate = false;
                anime({
                    targets   : animate,
                    translateX: {
                        value   : val * index + 'rem',
                        duration: 0,
                        easing  : 'linear'
                    },
                    translateY: [ '100%', 0 ],
                    scale     : {
                        value   : [ 0, 1 ],
                        duration: 400,
                        easing  : 'easeOutBack'
                    },
                    duration  : 600,
                    easing    : 'easeInOutQuint'

                })


            }
        },
        watch   : {
            '$route.name'(val) {
                if (this.firstAnimate) {
                    this.firstNavigation(val);
                } else {
                    this.navigationAnimate(val);
                }

            }
        },
    }
</script>

<style scoped lang="less">
    .tel-icon {
        width: 6/10rem;
        display: inline-block;
    }

    .back-icon {
        width: 5/10rem;
    }

    .test-item {
        position: absolute;
        /*bottom: 2/10rem;*/
        bottom: 0;
        width: 25/10rem;
        left: 0;
        display: flex;
        padding: 0 1/10rem;
        align-items: center;
        justify-content: center;
        transform: scale(0);
        border-bottom: 1px solid #f13354;

        .i-c {
            height: 6/10rem;
            flex: auto;
            background-image: linear-gradient(135deg, #ec008c, #f43f3b);;
            border-radius: 3/10rem;
            box-shadow: 3px 3px 10px rgba(255, 255, 255, 0.28);
            /*display: none; */
        }

        svg {
            display: none;
        }
    }

    .nav-empty {
        height: 4/10rem;
    }
</style>
